<script lang="ts" setup>
import DiscoverArticle from "@/components/discover/DiscoverArticle.vue";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const CategoryValue = ref(0);

CategoryValue.value = Number(route.query.id);

const option = [
    { text: '图文', value: 0 },
    { text: '问答', value: 3 },
    { text: '阅读', value: 1 },
    { text: '影视', value: 5 },
    { text: '音乐', value: 4 },
    { text: '电台', value: 8 },
];

function goToBack() {
    router.push({ name: 'home' });
}

watch(() => route.query, (newValue) => {
    CategoryValue.value = Number(newValue.id);
})

watch(() => CategoryValue.value, (newValue) => {
    CategoryValue.value = newValue;
})
</script>

<template>
    <div class="relative">
        <div class="absolute p-5 z-10" @click="goToBack">
            <img class="w-6 h-10 " src="@/assets/card/h5_qr_back.png" alt="back">
        </div>

        <van-dropdown-menu>
            <van-dropdown-item v-model="CategoryValue" :options="option" />
        </van-dropdown-menu>

        <transition-group name="fade">
            <DiscoverArticle :category="CategoryValue" :key="CategoryValue" />
        </transition-group>
    </div>
</template>